<template>
  <datagrid :data="data" :model="model"/>
</template>

<script lang="js" setup>
import Datagrid from "/@//components/datagrid/index.js";
import {ref} from "vue";

const data = ref([{
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
}, {
  id: '',
  value: 'value'
},]);
const model = {
  id: '',
  rowKey: 'id',
  search: [{
    prop: 'label',
    label: "名称",
    type: 'input',
  },],
  form: {
    width: '900',
    fields: [{
      prop: 'value',
      label: "编码",
      type: 'input',
      width: '300',
      rules: [{required: true, message: "`${'请填写编码'}`"}]
    }, {
      prop: 'label',
      label: "名称",
      type: 'input',
      width: '300',
      rules: [{required: true, message: "`${'请填写名称'}`"}]
    }, {
      prop: 'multiple',
      label: "多选",
      type: 'switch',
      rules: [{required: true, message: "`${'请填写多选'}`"}]
    }, {
      prop: 'isArray',
      label: "数组",
      type: 'switch',
      rules: [{required: true, message: "`${'请填写数组'}`"}]
    }]
  },
  fields: [{
    prop: 'value',
    label: "编码",
    type: 'input',
  }, {
    prop: 'label',
    label: "名称",
    type: 'input',
  }, {
    prop: 'multiple',
    label: "多选",
    type: 'switch',
  }, {
    prop: 'isArray',
    label: "数组",
    type: 'switch',
  }],
  buttons: [{
    value: 'add',
    label: '新增',
    icon: 'CirclePlus',
    location: 'tools'
  }, {
    value: 'edit',
    label: '修改',
    icon: 'Edit',
    link: true,
    location: 'table'
  }, {
    value: 'remove',
    label: '删除',
    icon: 'Delete',
    type: 'danger',
    link: true,
    location: 'table'
  }, {
    value: 'cancel',
    label: '取消',
    type: 'default',
    location: 'dialog'
  }, {
    value: 'save',
    label: '保存',
    type: 'primary',
    location: 'dialog'
  },]
};
</script>

<style scoped>

</style>
